<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<el-button type="primary" plain @click="showDialog('column')" class="el-icon-plus" size="small">添加字段</el-button>
			<el-button type="success" plain @click="showDialog('tag')" class="el-icon-plus" size="small">添加标签</el-button>
			<!-- <div style="color: red;font-size: small;margin-top: 10px;">说明：双击修改(TDengine目前对超表的修改仅支持修改列宽，标签列名、标签列宽)</div> -->
		</div>
		<el-table :data="tableData" border style="width: 100%" :highlight-current-row="true" @row-click = "onRowClick" :row-class-name="tableRowClassName">
			<el-table-column prop="name" label="名称">
				
			</el-table-column>
			<el-table-column prop="dbType" label="类型" width="120"></el-table-column>
			<el-table-column prop="dblength" label="长度" width="120">
			</el-table-column>
			<el-table-column prop="type" label="字段/标签" width="120">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.type==='column'">字段</el-tag>
					<el-tag v-if="scope.row.type==='tag'" type="success">标签</el-tag>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="120">
				<template slot-scope="scope">
					<el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
					<el-button @click="del(scope.row)" type="text" size="small" v-if="scope.row.id!=1">删除</el-button>
				</template>
			</el-table-column>
			<div slot="append" style="text-align: center;margin: 10px;">
			    <el-button type="danger" plain style="width: 100%;" @click="saveStable()" class="el-icon-plus" size="medium">保存超表</el-button>
			</div>
		</el-table>
		
		

		<el-dialog :close-on-click-modal="false" :before-close="cancelAdd" :visible.sync="addDialog" :title="title">
			<el-form :model="stableForm" ref="stableForm" :rules="stableRules" label-width="80px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="stableForm.name" maxlength="150"></el-input>
				</el-form-item>
				<el-col :span="12">
					<el-form-item label="类型" prop="type">
						<el-select v-model="stableForm.type" placeholder="请选择" @change="typeChange" :disabled="selectDisabled">
							<el-option v-for="item in typeOptions" :key="item.value" :label="item.value" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="长度" prop="dblength">
						<el-input v-model="stableForm.dblength" :disabled="lenDisabled"></el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelAdd" size="medium">取 消</el-button>
				<el-button type="primary" @click="confirmAdd('stableForm')" size="medium">确 定</el-button>
			</div>
		</el-dialog>

	</el-card>
</template>

<script>
	import taos from '../../api/taosrestful'
	import {mapGetters} from 'vuex'
	import bus from '../../utils/bus'
	export default {
		name:'stable_new',
		data() {
			return {
				payload: null,
				title: '添加字段',
				addDialog: false,
				dialogType: 'column',
				stableForm: {'id':'','name':'','dblength':0,'type':''},
				tableData: [],
				lenDisabled: false,
				selectDisabled: false,
				typeOptions: [
					{value:'TIMESTAMP',len:8},{value:'INT',len: 4},{value:'BIGINT',len: 8 },{ value:'FLOAT',len: 4 },{value:'DOUBLE',len: 8 },
					{ value:'SMALLINT',len: 2 },{ value:'TINYINT',len: 1 },{ value:'BOOL',len: 1 },{ value:'NCHAR',len: 0 },{ value:'BINARY',len: 0 }
				],
				stableRules:{
					name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
					type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
					dblength: [{ required: true, message: '请输入长度', trigger: 'blur' }],				
				},
				editType: false,
				tableName: null,
				currentRowIndex:0
			};
		},
		computed: {
			...mapGetters(['curObject'])
		},
		created() {
			this.init()
		},
		props: {
		    objId:''
		},
		methods: {
			init(){
				let tmpStable = JSON.parse(localStorage.getItem(this.objId))
				if(!tmpStable){
					this.$message({message: '请输入超表的表名',type: 'error',duration: 1000})
					return
				}
				let link = this.curObject.link
				this.payload = {ip: link.host,port: link.port,user: link.user,password: link.password}
				this.tableName = tmpStable.name
				this.tableData.push({'id':1,'name':tmpStable.columnName,'dbType':'TIMESTAMP','dblength':8,'type':'column'})
			},
			tableRowClassName({row, rowIndex}) {
				row.row_index = rowIndex;
			},
			onRowClick(row, column, event){
				this.currentRowIndex = row.row_index;
			},
			edit(row){
				this.title = row.type==='column'?'编辑字段':'编辑标签'
				this.addDialog = true
				this.stableForm.name = row.name
				this.stableForm.dblength = row.dblength
				this.stableForm.type = row.dbType
				this.stableForm.id = row.id
				this.editType = true
				this.selectDisabled = true
				this.dialogType = row.type
				if(row.dbType=='NCHAR' || row.dbType=='BINARY'){
					this.lenDisabled = false
				}else{
					this.lenDisabled = true
				}
			},
			cancelAdd() {
				this.addDialog = false
				this.lenDisabled = false
				this.selectDisabled = false
			},
			showDialog(type) {
				this.addDialog = true
				this.lenDisabled = false
				this.selectDisabled = false
				this.editType = false
				this.dialogType = type
				this.title = type==='column'?'添加字段':'添加标签'
				this.stableForm = {'id':'','name':'','dblength':0,'type':''}
			},
			typeChange(v){
				for(var i=0;i<this.typeOptions.length;i++){
					let option = this.typeOptions[i]
					if(v===option.value){
						if(option.len===0){
							this.stableForm.dblength = 20
							this.lenDisabled = false
						}else{
							this.stableForm.dblength = option.len
							this.lenDisabled = true
						}
					}
				}
			},
			confirmAdd(fromName) {
				this.$refs['stableForm'].validate((valid) => {
				if (valid) {
					//判断重复
					for (var i = 0;i < this.tableData.length; i++){
						let repeat = false
						if(this.editType){
							if (this.stableForm.id!=this.tableData[i].id && this.tableData[i].name===this.stableForm.name){
								repeat = true
							}
							
						}else{
							if (this.tableData[i].name===this.stableForm.name){
								repeat = true
							}
						}
						if(repeat){
							this.$message({message: '【'+this.stableForm.name+'】已存在',type: 'error',duration: 1000})
							return
						}
					}
					//编辑
					if(this.editType){
						//先删除之前的
						for (var i = 0;i < this.tableData.length; i++){
							if (this.tableData[i].id===this.stableForm.id){
								this.tableData.splice(i,1);
							}
						}
						this.tableData.splice(this.currentRowIndex,0,{'id':this.stableForm.id,'name':this.stableForm.name,'dbType':this.stableForm.type,'dblength':this.stableForm.dblength,'type':this.dialogType})
					}else{
						this.tableData.push({'id':new Date().getTime(),'name':this.stableForm.name,'dbType':this.stableForm.type,'dblength':this.stableForm.dblength,'type':this.dialogType})
					}
					this.addDialog = false
					this.currentRowIndex = 0
				}
				});
			},
			del(row){
				for (var i = 0;i < this.tableData.length; i++){
				   if (this.tableData[i].name===row.name){
					   this.tableData.splice(i,1);
				   }
				}
			},
			//新增
			saveStable(){
				let columns = ''
				let tags = ''
				let countColumn = 0;
				for (var i = 0;i < this.tableData.length; i++){
					let tmpData = this.tableData[i]
					let dbType = tmpData.dbType
					if(tmpData.dbType==='NCHAR' || tmpData.dbType==='BINARY'){
						dbType = tmpData.dbType+'('+tmpData.dblength+')'
					}
					if(tmpData.type==='column'){
						columns +=tmpData.name + ' '+ dbType + ','
						countColumn++
					}
					if(tmpData.type==='tag'){
						tags +=tmpData.name + ' '+ dbType + ','
					}
				}
				if(columns==='' || countColumn<2){
					this.$message({message: '超表必须指定一个字段列',type: 'error',duration: 1000})
					return
				}
				if(tags===''){
					this.$message({message: '超表必须指定一个标签列',type: 'error',duration: 1000})
					return
				}
				taos.createStable(this.curObject.dbName,this.tableName,columns.substr(0,columns.length-1),tags.substr(0,tags.length-1),this.payload).then(data => {
					if (data.res) {
						bus.$emit('changeCurObject_stable','新增超表');
						bus.$emit('removeTab', 'stnew_'+this.tableName)
						localStorage.removeItem("tmpStable")
					}else{
						this.$message({message: data.msg,type: 'error',duration: 1000})
					}
				})
			}
		}
	};
</script>

<style>
</style>
